<script>
import {queryRegistFeeItems,fee} from '@/api/regist/regist'

export default {
  nane: 'RegistFee',
  data() {
    return {
      searchForm: {
        registId: null
      },
      selection: [],
      //根据患者Id查询的患者信息
      regist: {
        name: '',
        age: null
      },
      //检查的项目,
      checkApplyItems: [
        // {name: 'ct', fee: 50, status: 1,},
        // {name: 'ct1', fee: 50, status: 2},
        // {name: 'ct2', fee: 50, status: 1},
        // {name: 'ct3', fee: 50, status: 3},
        // {name: 'ct4', fee: 50, status: 1},
      ],
      //检验的项目,
      inspectApplyItems: [
        // {name: '血常规', fee: 50, status: 1,},
        // {name: '尿常规', fee: 50, status: 2},
      ],


    }
  },
  computed: {
    feeAmount() {
      let amount = 0;
      this.selection.forEach(item => {
        amount += item.price
      })
      return amount
    },
    //收费项目 检查、检验
    feeItems() {
      let array = [];
      this.checkApplyItems.forEach(item => {
        item.type = 1;
        array.push(item);
      })

      this.inspectApplyItems.forEach(item => {
        item.type = 2;
        array.push(item);
      })
      return array;
    }
  },
  methods: {
    search() {
      this.selection = [];

      queryRegistFeeItems(this.searchForm.registId).then(res => {
        if(!res.register){
           this.$message.warning("未查询到患者信息");
          return;
        }
        this.regist = res.register;

        this.checkApplyItems = res.checkApplyItems;
        this.inspectApplyItems = res.inspectApplyItems;
      })
    },
    fee() {
      let data = {
        registId:this.regist.registId,
        selection:this.selection
      }
      let paramStr = encodeURI(JSON.stringify(data));
      fee(paramStr).then(res=>{
            if(res){
              this.$message.success("收费成功");
              this.search();
            }else{
              this.$message.error("收费失败，请联系管理员");
            }
      })
    },

    //勾选项目进行收费
    select(selection, row) {
      this.selection = selection;
    },
    selectable(row, index) {
      return row.status == 1;
    }
  }


}
</script>


<template>
  <div class="container">
    <el-form :model="searchForm" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="病历号" prop="registId">
        <el-input v-model="searchForm.registId" placeholder="请输入病历号" clearable/>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <hr/>
    <el-form :model="regist" size="small" :inline="true" label-width="68px">
      <el-form-item label="患者姓名" prop="name">
        <el-input v-model="regist.name" clearable readonly/>
      </el-form-item>
      <el-form-item label="年龄" prop="name">
        <el-input v-model="regist.age" clearable readonly/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="fee">收费</el-button>
      </el-form-item>

    </el-form>
    <hr/>

    <!--    feeItems : 计算属性-->
    <el-table :data="feeItems" width="100%" size="mini" @select="select">
      <el-table-column type="selection" label="选择" :selectable="selectable"></el-table-column>
      <el-table-column prop="name" label="项目名称(检查、检验)"></el-table-column>
      <el-table-column prop="type" label="收费类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==1" type="success">
            检查
          </el-tag>
          <el-tag v-else-if="scope.row.type==2">
            检验
          </el-tag>
        </template>


      </el-table-column>
      <el-table-column prop="price" label="费用"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">

          <el-tag v-if="scope.row.status==1" type="danger">
            待缴费
          </el-tag>
          <el-tag v-else-if="scope.row.status==2" type="success">
            已缴费
          </el-tag>
          <el-tag v-else-if="scope.row.status==3" type="warning">
            退费
          </el-tag>
          <el-tag v-else-if="scope.row.status==4" type="info">
            已完成
          </el-tag>

          <el-tag v-else>
            待提交
          </el-tag>
        </template>

      </el-table-column>

    </el-table>

    <div>费用综合:{{ feeAmount }}</div>
  </div>


</template>


<style scoped>
.container {
  margin: 20px 20px
}
</style>
